<template>
  <div class="tw-main">
    <div class="screen" >
      <el-row class="tw-grid">
        <el-col
          :span="7"
          class="tw-grid__flow flow_1">
          <tw-card
          label="用户统计分析"
          >
            <h5 class="tw-echarts-title at-top" :data-text="title[0]" :style="{width: title[0].length + 'em'}">{{title[0]}}</h5>
            <tw-echarts
              id="echarts_registerUsers4k"
              ref="echarts_registerUsers4k"
              :additionalOptions="additionalOptions['echarts_registerUsers4k']"
              height="16vh"
            ></tw-echarts>
            <h5 class="tw-echarts-title" :data-text="title[1]" :style="{width: title[1].length + 'em'}">{{title[1]}}</h5>
            <tw-echarts
              id="echarts_monthUserActivity"
              ref="echarts_monthUserActivity"
              :additionalOptions="additionalOptions['echarts_monthUserActivity']"
              @finishCharts="simulationTime"
              height="17vh"
            ></tw-echarts>
            <h5 class="tw-echarts-title" :data-text="title[2]" :style="{width: title[2].length + 'em'}">{{title[2]}}</h5>
            <tw-echarts
              id="echarts_schoolNumber"
              ref="echarts_schoolNumber"
              :additionalOptions="additionalOptions['echarts_schoolNumber']"
              height="17vh"
            ></tw-echarts>
            <h5 class="tw-echarts-title" :data-text="title[3]" :style="{width: title[3].length + 'em'}">{{title[3]}}</h5>
            <tw-echarts
              id="echarts_visitsNumber"
              ref="echarts_visitsNumber"
              :additionalOptions="additionalOptions['echarts_visitsNumber']"
              @finishCharts="simulationVisit"
              height="17vh"
            ></tw-echarts>
          </tw-card>
        </el-col>
        <el-col
          :span="10"
          class="tw-grid__flow flow_2">
          <div class="tw-center-box">
            <div class="tw-info-huge">
              <div class="info-border-left"></div>
              <p data-text="产品覆盖地图">产品覆盖地图</p>
              <div class="info-border-left"></div>
            </div>
            <ul class="tw-basic-info">
              <li><img src="/static/weishidataview/images/4k/data-bg.png" alt=""></li>
              <li><img src="/static/weishidataview/images/4k/data-bg.png" alt=""></li>
              <li><img src="/static/weishidataview/images/4k/data-bg.png" alt=""></li>
              <li><img src="/static/weishidataview/images/4k/data-bg.png" alt=""></li>
            </ul>
          </div>
        </el-col>
        <el-col
          :span="7"
          class="tw-grid__flow flow_3">
          <tw-card
            label="教育事业基本情况图"
            :tabRight="true"
            :tabs="educationTab"
            :activeTab="educationTabActive"
            @changeTab="handleChangeCardTab"
          >
            <div class="tw-tab-panes">
              <div class="tw-tab-pane" name="tab-first" v-show="educationTabActive === 'tab-first'">
                <tw-echarts
                  id="echarts_educationBasicSituation"
                  ref="echarts_educationBasicSituation"
                  :additionalOptions="additionalOptions['echarts_educationBasicSituation']"
                  height="34vh"
                ></tw-echarts>
              </div>
              <div class="tw-tab-pane" name="tab-second" v-show="educationTabActive === 'tab-second'">
                <tw-echarts
                  id="echarts_studentFlow"
                  ref="echarts_studentFlow"
                  :additionalOptions="additionalOptions['echarts_studentFlow']"
                  height="34vh"
                ></tw-echarts>
              </div>
            </div>
          </tw-card>
          <tw-card
            label="应用基本情况图"
            class="f-mt40"
            :tabRight="true"
            :tabs="appTab"
            :activeTab="appTabActive"
            @changeTab="handleChangeCardTab"
          >
            <div class="tw-tab-panes">
              <div class="tw-tab-pane" name="tab-first" v-show="appTabActive === 'tab-first'">
                <tw-bubble
                boxHeight="16.5vh"
                :appData="appData"
                ></tw-bubble>
              </div>
              <div class="tw-tab-pane" name="tab-second" v-show="appTabActive === 'tab-second'">
                <tw-echarts
                  id="echarts_appAccessStatic"
                  ref="echarts_appAccessStatic"
                  :additionalOptions="additionalOptions['echarts_appAccessStatic']"
                  height="16.5vh"
                  @finishCharts="simulation"
                ></tw-echarts>
              </div>
            </div>
          </tw-card>
          <tw-card
            label="用户行为分析"
            class="f-mt40"
            :tabRight="true"
            :tabs="userTab"
            :activeTab="userTabActive"
            @changeTab="handleChangeCardTab"
          >
            <div class="tw-tab-panes">
              <div class="tw-tab-pane" name="tab-first" v-show="userTabActive === 'tab-first'">
                <tw-echarts
                  id="echarts_teacherBehaviorAnalysis"
                  ref="echarts_teacherBehaviorAnalysis"
                  :additionalOptions="additionalOptions['echarts_teacherBehaviorAnalysis']"
                  height="16.5vh"
                ></tw-echarts>
              </div>
              <div class="tw-tab-pane" name="tab-second" v-show="userTabActive === 'tab-second'">
                <tw-echarts
                  id="echarts_studentBehaviorAnalysis"
                  ref="echarts_studentBehaviorAnalysis"
                  :additionalOptions="additionalOptions['echarts_studentBehaviorAnalysis']"
                  height="16.5vh"
                ></tw-echarts>
              </div>
            </div>
          </tw-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script scoped>
import echarts from 'echarts'
import TwCard from '@/components/TwCard'
import TwEcharts from '@/components/TwEcharts'
import TwBubble from '@/components/TwBubble'

export default{
  created () {
    // echarts_registerUsers4k 4k首页注册用户数
    this.$axios.get('/static/weishidataview/jsondata/echarts_registerUsers4k.json').then(response => {
      this.additionalOptions.echarts_registerUsers4k = response.data
    }, response => {
      console.log('error')
    })
    // echarts_monthUserActivity 月用户活跃
    this.$axios.get('/static/weishidataview/jsondata/echarts_monthUserActivity.json').then(response => {
      this.additionalOptions.echarts_monthUserActivity = response.data
    }, response => {
      console.log('error')
    })
    // echarts_schoolNumber 月用户活跃
    this.$axios.get('/static/weishidataview/jsondata/echarts_schoolNumber.json').then(response => {
      this.additionalOptions.echarts_schoolNumber = response.data
    }, response => {
      console.log('error')
    })
    // echarts_visitsNumber 访问次数
    this.$axios.get('/static/weishidataview/jsondata/echarts_visitsNumber.json').then(response => {
      this.additionalOptions.echarts_visitsNumber = response.data
    }, response => {
      console.log('error')
    })
    // echarts_educationBasicSituation 访问次数
    this.$axios.get('/static/weishidataview/jsondata/echarts_educationBasicSituation.json').then(response => {
      this.additionalOptions.echarts_educationBasicSituation = response.data
    }, response => {
      console.log('error')
    })
    // echarts_studentFlow 访问次数
    this.$axios.get('/static/weishidataview/jsondata/echarts_studentFlow.json').then(response => {
      this.additionalOptions.echarts_studentFlow = response.data
    }, response => {
      console.log('error')
    })
    // echarts_appAccessStatic 应用接入统计
    this.$axios.get('/static/weishidataview/jsondata/echarts_appAccessStatic.json').then(response => {
      this.additionalOptions.echarts_appAccessStatic = response.data
    }, response => {
      console.log('error')
    })
    // echarts_teacherBehaviorAnalysis 教师行为分析
    this.$axios.get('/static/weishidataview/jsondata/echarts_teacherBehaviorAnalysis.json').then(response => {
      this.additionalOptions.echarts_teacherBehaviorAnalysis = response.data
    }, response => {
      console.log('error')
    })

    // echarts_studentBehaviorAnalysis 学生行为分析
    this.$axios.get('/static/weishidataview/jsondata/echarts_studentBehaviorAnalysis.json').then(response => {
      this.additionalOptions.echarts_studentBehaviorAnalysis = response.data
    }, response => {
      console.log('error')
    })
  },
  mounted () {
    window.onresize = () => {
      this.$refs['echarts_registerUsers4k'].resizeChart()
      this.$refs['echarts_monthUserActivity'].resizeChart()
      this.$refs['echarts_schoolNumber'].resizeChart()
      this.$refs['echarts_visitsNumber'].resizeChart()
      this.$refs['echarts_educationBasicSituation'].resizeChart()
      this.$refs['echarts_studentFlow'].resizeChart()
      this.$refs['echarts_appAccessStatic'].resizeChart()
      this.$refs['echarts_teacherBehaviorAnalysis'].resizeChart()
      this.$refs['echarts_studentBehaviorAnalysis'].resizeChart()
    }
  },
  props: [],
  data () {
    return {
      additionalOptions: {
        echarts_registerUsers4k: {},
        echarts_monthUserActivity: {},
        echarts_schoolNumber: {},
        echarts_visitsNumber: {},
        echarts_educationBasicSituation: {},
        echarts_studentFlow: {},
        echarts_appAccessStatic: {},
        echarts_teacherBehaviorAnalysis: {},
        echarts_studentBehaviorAnalysis: {}
      },
      // 为配置渐变色，需要统计字数
      title: [
        '注册用户数：20,000,000', '本月活跃用户数：20,000,000',
        '学校数：20,000', '访问次数：20,000,000'
      ],
      // 教育事业基本情况tab
      educationTab: [
        {
          id: 'tab-first',
          name: 'educationTab',
          value: '教育基本情况'
        }, {
          id: 'tab-second',
          name: 'educationTab',
          value: '学生流向'
        }],
      educationTabActive: 'tab-first',
      // 应用基本情况图
      appTab: [
        {
          id: 'tab-first',
          name: 'appTab',
          value: '热门应用分布'
        }, {
          id: 'tab-second',
          name: 'appTab',
          value: '应用接入统计'
        }],
      appTabActive: 'tab-first',
      // 用户行为tab
      userTab: [
        {
          id: 'tab-first',
          name: 'userTab',
          value: '教师行为'
        }, {
          id: 'tab-second',
          name: 'userTab',
          value: '学生行为'
        }],
      userTabActive: 'tab-first',
      appData: [
        // 4k 下最多传入7个
        {
          name: '云空间',
          type: 'web应用'
        },
        {
          name: '数字图书馆',
          type: 'web应用'
        },
        {
          name: '一卡通',
          type: 'web应用'
        },
        {
          name: 'AI作业',
          type: 'web应用'
        },
        {
          name: '天闻口语',
          type: 'web应用'
        },
        {
          name: '云选课',
          type: 'web应用'
        },
        {
          name: '智能选课',
          type: 'web应用'
        }
      ]
    }
  },
  methods: {
    handleFinishCharts: function (payload) {
      console.log(payload)
      // 教师行为分析涉及到echarts实例事件，在此处写逻辑
      let teacherChart = echarts.init(document.getElementById('echarts_teacherBehaviorAnalysis'))
      teacherChart.on('click', (params) => {
        if (params.name === '课中') {
          let temp = teacherChart.getOption()
          temp.series[1].data = temp.series[1].dataInClass
          teacherChart.setOption(temp)
        }
        if (params.name === '课外') {
          let temp = teacherChart.getOption()
          temp.series[1].data = temp.series[1].dataOutClass
          teacherChart.setOption(temp)
        }
      })
      // 学生行为分析echart实例事件
      let studentChart = echarts.init(document.getElementById('echarts_studentBehaviorAnalysis'))
      studentChart.on('click', (params) => {
        if (params.name === '课中') {
          let temp = studentChart.getOption()
          temp.series[1].data = temp.series[1].dataInClass
          studentChart.setOption(temp)
        }
        if (params.name === '课后') {
          let temp = studentChart.getOption()
          temp.series[1].data = temp.series[1].dataOutClass
          studentChart.setOption(temp)
        }
        if (params.name === '课前') {
          let temp = studentChart.getOption()
          temp.series[1].data = temp.series[1].dataBeforeClass
          studentChart.setOption(temp)
        }
      })
    },
    simulation: function () {
      let tempChart = echarts.init(document.getElementById('echarts_appAccessStatic'))
      let dataLength = tempChart.getOption().series[0].data.length
      let flag = 0
      setInterval(function () {
        tempChart.dispatchAction({
          type: 'pieSelect',
          // 可选，系列 index，可以是一个数组指定多个系列
          seriesIndex: 0,
          dataIndex: flag
        })
        if (flag > 0) {
          tempChart.dispatchAction({
            type: 'pieUnSelect',
            // 可选，系列 index，可以是一个数组指定多个系列
            seriesIndex: 0,
            dataIndex: flag - 1
          })
        }
        flag += 1
        if (flag === dataLength) {
          tempChart.dispatchAction({
            type: 'pieUnSelect',
            // 可选，系列 index，可以是一个数组指定多个系列
            seriesIndex: 0,
            dataIndex: flag - 1
          })
          flag = 0
        }
      }, 2000)
    },
    simulationTime: function () {
      // 模拟本月活跃用户数滚动
      let tempChart = echarts.init(document.getElementById('echarts_monthUserActivity'))
      let flag = tempChart.getOption().xAxis[0].data.length
      let index = 0
      setInterval(() => {
        if (index + 8 > flag) {
          index = 0
        }
        tempChart.dispatchAction({
          type: 'dataZoom',
          // 开始位置的数值
          startValue: index,
          // 结束位置的数值
          endValue: index + 7
        })
        index += 1
      }, 1000)
    },
    handleChangeCardTab: function (id, name) {
      if (name === 'appTab') {
        this.appTabActive = id
        if (id === 'tab-second') {
          this.$refs['echarts_appAccessStatic'].resizeChart()
        }
      }
      if (name === 'educationTab') {
        this.educationTabActive = id
        if (id === 'tab-second') {
          this.$refs['echarts_studentFlow'].resizeChart()
        }
      }
      if (name === 'userTab') {
        this.userTabActive = id
        if (id === 'tab-second') {
          this.$refs['echarts_studentBehaviorAnalysis'].resizeChart()
        }
      }
    },
    simulationVisit: function () {
      // 模拟本月访问次数
      let tempChart = echarts.init(document.getElementById('echarts_visitsNumber'))
      let flag = tempChart.getOption().xAxis[0].data.length
      let index = 0
      setInterval(() => {
        if (index + 18 > flag) {
          index = 0
        }
        tempChart.dispatchAction({
          type: 'dataZoom',
          // 开始位置的数值
          startValue: index,
          // 结束位置的数值
          endValue: index + 7
        })
        index += 1
      }, 1000)
    }
  },
  components: {
    TwCard,
    TwEcharts,
    TwBubble
  }
}
</script>

<style scoped></style>
